<template>
    <div class="order-list-main">
        <div class="search-form zw-form-layout">
            <el-form ref="formRef" :model="searchForm" label-width="auto">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="" prop="keywordsContent">
                            <el-input
                                v-model="searchForm.keywordsContent"
                                class="keywords_content"
                                :placeholder="
                                    Data.keyWordTypeList.find(x => x.code === searchForm.keywordsType)?.label
                                ">
                                <template #prepend>
                                    <el-select
                                        v-model="searchForm.keywordsType"
                                        placeholder="Select"
                                        style="width: 180px">
                                        <el-option
                                            v-for="item in Data.keyWordTypeList"
                                            :key="item.code"
                                            :label="item.label"
                                            :value="item.code" />
                                    </el-select>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="arrowType === 'down'" class="zw-form-btns">
                        <el-button type="primary" @click="searchHandler">查询</el-button>
                        <el-button plain @click="resetHandler">清空</el-button>
                        <span class="search-act" @click="serachArrowHandler()">
                            展开 <el-icon><ArrowDown /> </el-icon>
                        </span>
                    </el-col>
                </el-row>
                <div v-if="arrowType === 'up'">
                    <el-row :gutter="20">
                        <el-col :span="16">
                            <el-form-item label="下单日期" prop="createdAt">
                                <div class="picker-container">
                                    <el-date-picker
                                        v-model="searchForm.createdAt"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        @change="dateChange"
                                        class="place-order-date" />
                                    <div class="search-time">
                                        <div
                                            class="search-time-item"
                                            :class="{ 'search-time-item-active': item.active }"
                                            v-for="(item, index) in Data.timeList"
                                            :key="index"
                                            @click="clickSearchTime(index, item)">
                                            {{ item.label }}
                                        </div>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="订单状态" prop="orderStatus">
                                <el-select clearable v-model="searchForm.orderStatus" placeholder="全部状态">
                                    <el-option label="全部状态" value="" />
                                    <el-option
                                        v-for="item in orderStatusOptions"
                                        :label="item.label"
                                        :value="item.value"
                                        :key="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="订单类型" prop="orderType">
                                <el-select clearable v-model="searchForm.orderType" placeholder="全部类型">
                                    <el-option label="全部类型" value="" />
                                    <el-option
                                        v-for="item in orderTypeOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="配送方式" prop="deliveryMethod">
                                <el-select clearable v-model="searchForm.deliveryMethod" placeholder="全部">
                                    <el-option label="全部" value="" />
                                    <el-option
                                        v-for="item in deliveryTypeOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="自提点" prop="selfLift">
                                <el-select clearable multiple v-model="searchForm.selfLift" placeholder="全部">
                                    <el-option
                                        v-for="item in Data.pickUpList"
                                        :key="item.id"
                                        :label="item.selfLiftName"
                                        :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="16" class="zw-form-btns">
                            <el-button type="primary" @click="searchHandler">查询</el-button>
                            <el-button plain @click="resetHandler">清空</el-button>
                            <span class="search-act" @click="serachArrowHandler(1)">
                                收起 <el-icon><ArrowUp /> </el-icon>
                            </span>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
        <div class="container">
            <div class="tabs">
                <el-tabs v-model="searchForm.orderTabStatus" @tab-click="tabClick">
                    <el-tab-pane
                        :label="item.label"
                        :name="item.status"
                        v-for="item in Data.statusList"
                        :key="item.status">
                    </el-tab-pane>
                </el-tabs>
                <el-button class="export-btn" @click="orderExport" v-auth="'order:export'">
                    订单导出&ensp;
                    <el-icon><Download /></el-icon>
                </el-button>
            </div>
            <div>
                <div class="table-header">
                    <div class="table-header-con">
                        <div class="table-header-item" v-for="(item, index) in Data.tableHeader" :key="index">
                            {{ item.label }}
                        </div>
                    </div>
                    <div class="order-item-bg"></div>
                </div>
                <div class="table-list" v-if="Data.isOrderList">
                    <div v-for="(item, index) in Data.tableData" :key="index">
                        <div class="order-item-title">
                            <div class="order-item-title-item">
                                订单号：{{ item.orderSn }}
                                <div v-if="[3, 4, 5].includes(item.orderType)" class="sign">拼</div>
                                <div v-else-if="item.orderType === 6" class="sign-jifen">积分商城</div>
                                <div v-else-if="item.orderType === 7" class="sign-manjian">满减</div>
                                <div v-if="[1, 2].includes(item.erpStatus)" class="sign-erp">ERP</div>
                            </div>
                            <div class="order-item-title-item">下单时间：{{ item.createdAt }}</div>
                            <div class="order-item-title-item">
                                <div
                                    v-if="item.sellerRemarks"
                                    type="warning"
                                    class="order-item-title-detail remark"
                                    @click="showRemarkHandler(item.id, item.sellerRemarks)">
                                    商家已备注
                                </div>
                                <div
                                    v-else
                                    type="warning"
                                    class="order-item-title-detail"
                                    @click="showRemarkHandler(item.id, item.sellerRemarks)">
                                    商家备注
                                </div>
                                <div
                                    type="warning"
                                    class="order-item-title-detail"
                                    v-auth="'order:detail'"
                                    @click="toDetail(item)">
                                    查看详情
                                </div>
                            </div>
                        </div>
                        <div>
                            <el-table
                                :data="item.goods"
                                :span-method="e => objectSpanMethod(e, index)"
                                border
                                :show-header="false">
                                <el-table-column prop="orderId" label="商品信息" width="350">
                                    <template #default="scope">
                                        <div class="goods-item">
                                            <img :src="scope.row.goodsImg" alt="" />
                                            <div v-if="scope.row.goodsStatus" class="shipped-tip">
                                                {{ item.deliveryMethod === 4 ? '已提货' : '已发货' }}
                                            </div>
                                            <div class="goods-item-info">
                                                <div class="goods-item-name">{{ scope.row.goodsName }}</div>
                                                <div
                                                    class="goods-item-sku"
                                                    v-for="(el, idx) in scope.row.skuExtInfo"
                                                    :key="idx">
                                                    {{ el.keyAttributeName }}：{{ el.attributeValue }}
                                                </div>
                                                <div class="goods-item-price">
                                                    <div v-if="item.orderType === 6">
                                                        <span v-if="scope.row.sellPrice"
                                                            >{{ floatDivide(scope.row.sellPrice, 100) }}元+</span
                                                        >
                                                        <span> {{ floatDivide(scope.row.goodPoints, 100) }}积分</span>
                                                    </div>
                                                    <div v-else>￥{{ floatDivide(scope.row.goodsPrice, 100) }}</div>
                                                </div>
                                            </div>
                                            <div class="buyNum">
                                                <div>x{{ scope.row.buyNum }}</div>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="refundStatusName"
                                    label="售后状态"
                                    min-width="100"
                                    align="center">
                                    <template #default="scope">
                                        <div class="status-refund_box">
                                            <div v-if="scope.row.refundStatus > 0" class="status-refund">售后</div>
                                            <div v-else></div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="sellPrice" label="实付金额" min-width="100" align="center">
                                    <template #default>
                                        <div class="price-color">
                                            {{ priceFilter(floatDivide(item.amountTotal, 100)) }}
                                        </div>
                                        <div v-if="item.logisticsFee + item.freeFreightFee" style="color: #969696">
                                            含运费：{{ floatDivide(item.logisticsFee + item.freeFreightFee, 100) }} 元
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="buyerUid" label="买家/收货人" width="240">
                                    <template #default>
                                        <div v-if="item.user || item.consigneeName" class="buyer-info">
                                            <div>
                                                {{ item.user[0]?.nickname }}
                                                <span v-if="item.user[0]?.mobile">（{{ item.user[0]?.mobile }}）</span>
                                            </div>
                                            <div v-if="item.consigneeName" class="consignee-info">
                                                {{ item.consigneeName }}
                                                <span v-if="item.consigneeMobile">（{{ item.consigneeMobile }}）</span>
                                                <!-- 自提没有收货地址 -->
                                                <div v-if="!item.isSelfPickup">
                                                    {{
                                                        (item.consigneeProvince || '') +
                                                            (item.consigneeCounty || '') +
                                                            (item.consigneeCity || '') +
                                                            (item.consigneeAddress || '') || ''
                                                    }}
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="deliveryMethod" label="配送方式" min-width="100" align="center">
                                    <template #default>
                                        <div>{{ transformStream(item.deliveryMethod, 'DELIVERY_TYPE_OPTIONS') }}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="orderStatusName" label="订单状态" min-width="100" align="center">
                                    <template #default>
                                        {{ translateOrderCode(item.orderStatus, item.isSelfPickup) }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" min-width="100" align="center">
                                    <template #default>
                                        <div class="pay-countdown" v-if="item.orderStatus == 1">
                                            <div>付款倒计时</div>
                                            <div class="countdown-time">
                                                <CountDown
                                                    :endTime="getTimeStamp(item.createdAt, item.autoCancelMinutes)" />
                                            </div>
                                            <div v-show="item.orderType === 1">
                                                <el-button
                                                    size="small"
                                                    v-auth="'order:modifyPrice'"
                                                    @click.stop="clickModify(item)">
                                                    修改价格
                                                </el-button>
                                            </div>
                                        </div>
                                        <div
                                            class="ship-button"
                                            v-auth="'order:delivery'"
                                            v-if="item.orderStatus == 2 || item.orderStatus == 5">
                                            <el-button
                                                :disabled="item.erpStatus === 1"
                                                size="small"
                                                @click.stop="clickShip(item)"
                                                >发货</el-button
                                            >
                                            <el-tooltip
                                                effect="dark"
                                                v-if="item.erpStatus === 1"
                                                content="该订单已同步至ERP，请前往ERP发货"
                                                placement="top-start">
                                                <el-icon><QuestionFilled /></el-icon>
                                            </el-tooltip>
                                        </div>
                                        <div
                                            class="table-button"
                                            v-if="
                                                item.isSelfPickup && item.deliveryMethod == 4 && item.orderStatus == 3
                                            ">
                                            <el-button size="small" style="width: 84px" @click.stop="printTicket(item)"
                                                >打印小票</el-button
                                            >
                                        </div>
                                        <div
                                            class="table-button"
                                            v-if="
                                                item.isSelfPickup && item.deliveryMethod == 4 && item.orderStatus == 3
                                            ">
                                            <el-button size="small" @click.stop="markPicked(item)">
                                                标记已提货
                                            </el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div v-if="index !== Data.tableData.length - 1" class="order-item-bg"></div>
                        </div>
                    </div>
                </div>
                <div class="no-table-list" v-else>
                    <img src="@/assets/imgs/logo/default.png" alt="" />
                    <div class="no-table-list-text">暂无订单数据</div>
                </div>
            </div>
            <div class="pagination zw-pagination">
                <Pagination
                    :total="Data.totalCount"
                    :page-size="searchForm.perPage"
                    :current-page="searchForm.page"
                    @sizeChange="sizeChange"
                    @pageChange="pageChange" />
            </div>
        </div>

        <ShipPopup
            v-model="Data.isShip"
            :orderId="Data.orderId"
            :goodsInfo="Data.skuInfo"
            :orderType="Data.orderType"
            @getOrderList="getOrderList" />
        <ModifyPricePopup
            v-model="Data.isModifyPrice"
            :orderId="Data.orderId"
            :goodsInfo="Data.skuInfo"
            :deliveryType="Data.deliveryType"
            @getOrderList="getOrderList" />
        <MarkRemark ref="remarkRef" @getOrderList="getOrderList" />
    </div>
</template>

<script setup name="orderList">
import { ref, reactive, onMounted, onUnmounted, inject } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { format, floatDivide, isNotEmpty, packSelectObjUtil, translateOrderCode } from '@/commons/utils.js';
import request from '@/request';
import storage from '@/commons/storage';
import store from '@/store';
import constants from '@/commons/constants';
import { setLayout, resetLayout } from '@/hooks/layout';
import { ZwMessage } from '@/commons';

import Pagination from '@/components/Pagination.vue';
import CountDown from '@/components/CountDown.vue';
import MarkRemark from './remark.vue';
import ShipPopup from './shipPopup.vue';
import ModifyPricePopup from './modifyPricePopup.vue';
const confirm = inject('confirm');

const useOrder = store.useOrderStore();
const router = useRouter();
const route = useRoute();
const currentTabIndex = route.query.current || '0';
const orderTypeOptions = reactive(packSelectObjUtil(constants.ORDER_TYPE_OPTIONS));
const deliveryTypeOptions = reactive(packSelectObjUtil(constants.DELIVERY_TYPE_OPTIONS));

const orderStatusOptions = [
    { label: '待付款', value: '1' },
    { label: '待发货', value: '2' },
    { label: '部分发货', value: '5' },
    { label: '待提货', value: '2.5' },
    { label: '待收货', value: '3' },
    { label: '已完成', value: '4' },
    { label: '拼团中', value: '6' },
    { label: '已关闭', value: '8' }
];

const searchForm = reactive({
    keywordsType: 1,
    keywordsContent: '',
    orderType: '',
    deliveryMethod: '',
    // 自提点
    selfLift: [],
    // 子状态 0 全部 1 分销  2 自提
    orderSubType: 0,
    shopId: storage.get('ZW-SHOPID'),
    orderTabStatus: currentTabIndex || useOrder.orderTabStatus,
    orderStatus: '',
    createdAt: [],
    createdAtStart: '',
    createdAtEnd: '',
    page: 1,
    perPage: 10,
    source: 'pc'
});
const Data = reactive({
    totalCount: 0,
    isOrderList: true,
    isShip: false,
    isModifyPrice: false,
    status: '1',
    statusList: [
        {
            label: '全部',
            status: '0'
        },
        {
            label: '待付款',
            status: '1'
        },
        {
            label: '待发货',
            status: '2'
        },
        {
            label: '待收货',
            status: '3'
        },
        {
            label: '已完成',
            status: '4'
        },
        {
            label: '已关闭',
            status: '5'
        }
    ],
    keyWordTypeList: [
        { label: '订单编号/订单商品', code: 1 },
        { label: '下单姓名/手机号', code: 2 },
        { label: '收货人姓名/手机号', code: 3 }
    ],
    timeList: [
        { label: '今天', value: 0, active: false },
        { label: '昨天', value: -1, active: false },
        { label: '近7天', value: -7, active: false },
        { label: '近30天', value: -30, active: false }
    ],
    tableHeader: [
        { label: '商品信息' },
        { label: '售后状态' },
        { label: '实付金额(元)' },
        { label: '买家/收货人' },
        { label: '配送方式' },
        { label: '订单状态' },
        { label: '操作' }
    ],
    tableData: [],
    timer: '',
    skuInfo: {},
    orderId: '',
    orderType: 1,
    deliveryType: 1,
    // 自提点列表
    pickUpList: []
});

const formRef = ref(null);

let arrowType = ref('down');

const serachArrowHandler = type => {
    if (type) {
        arrowType.value = 'down';
    } else {
        arrowType.value = 'up';
    }
};

const tabClick = ({ paneName }) => {
    useOrder.setOrderTabStatus(paneName);
    searchForm.page = 1;
    setTimeout(() => {
        getOrderList();
    });
};

// 处理查询入参
const getQurryParam = () => {
    let params = { ...searchForm };
    // 待提货订单
    if (params.orderStatus == 2.5) {
        params.orderSubType = 2;
        params.orderStatus = '';
    } else {
        params.orderSubType = 0;
    }
    params.orderTabStatus = Number(params.orderTabStatus);
    if (!params.createdAtStart) {
        params.createdAtStart = undefined;
    }
    if (!params.createdAtEnd) {
        params.createdAtEnd = undefined;
    }
    params.keywords = {
        type: params.keywordsType,
        content: params.keywordsContent
    };
    delete params.keywordsType;
    delete params.keywordsContent;
    const info = Data.timeList.find(el => el.active) || {};
    params.timeFlag = info.value;
    return params;
};

// orderSubType：0：全部，2 ：查询待提货订单
// orderTabStatus：0：全部，1：代付款，2：待发货+部分发货，3：待收货+部分发货，4：已完成+已收货，5：已关闭
// orderStatus：0全部，1待付款，2待发货，3待收货，4已收货+已完成，5部分发货，6拼团中，8已关闭
const getOrderList = async () => {
    Data.isOrderList = true;
    let res = await request('getOrderListServ', getQurryParam());
    Data.tableData = (isNotEmpty(res.data) && res.data.list) || [];
    Data.totalCount = (isNotEmpty(res.data) && res.data.totalCount) || 0;
    if (!Data.tableData.length) {
        Data.isOrderList = false;
    }
};

const clickSearchTime = (index, item) => {
    if (item.active) {
        Data.timeList[index].active = false;
        searchForm.createdAt = [];
    } else {
        Data.timeList.map(el => (el.active = false));
        Data.timeList[index].active = true;
        searchForm.createdAt = [
            format(
                new Date(new Date().setHours(0, 0, 0) + 24 * 60 * 60 * 1000 * Data.timeList[index].value),
                'YYYY-MM-DD HH:mm:ss'
            ),
            format(new Date(), 'YYYY-MM-DD 23:59:59')
        ];
    }
    getOrderList();
};

/**
 * 重置
 */
const resetHandler = () => {
    formRef.value.resetFields();
    dateChange();
    searchForm.keywordsType = 1;
};

const orderExport = async () => {
    let res = await request('orderExportServ', getQurryParam());
    const fileName = '订单列表导出.csv';
    const blob = new Blob([res], { type: 'application/ms-excel' });
    const eLink = document.createElement('a');
    eLink.download = fileName;
    eLink.style.display = 'none';
    eLink.href = URL.createObjectURL(blob);
    document.body.appendChild(eLink);
    eLink.click();
    URL.revokeObjectURL(eLink.href);
    document.body.removeChild(eLink);
};

const clickShip = val => {
    Data.isShip = true;
    Data.skuInfo = val;
    Data.orderId = val.id;
    Data.orderType = val.orderType;
};

const clickModify = val => {
    Data.isModifyPrice = true;
    Data.skuInfo = val;
    Data.orderId = val.id;
    Data.deliveryType = val.deliveryMethod;
};

const toDetail = val => {
    window.open(location.origin + `/order/list/detail?orderId=${val.id}`);
};

const dateChange = val => {
    Data.timeList.map(el => (el.active = false));
    if (val) {
        searchForm.createdAtStart = format(val[0], 'YYYY-MM-DD HH:mm:ss');
        searchForm.createdAtEnd = format(val[1], 'YYYY-MM-DD') + ' 23:59:59';
    } else {
        searchForm.createdAtStart = '';
        searchForm.createdAtEnd = '';
    }
};

const objectSpanMethod = ({ rowIndex, columnIndex }, index) => {
    if ([2, 3, 4, 5, 6].includes(columnIndex)) {
        // if (columnIndex == 4 && Data.tableData[index].orderStatus != 1) {
        //     return {
        //         rowspan: 1,
        //         colspan: 1
        //     };
        // }
        let row = 0;
        Data.tableData.map(el => {
            if (el.goods.length > row) {
                row = el.goods.length;
            }
        });
        if (rowIndex % row === 0) {
            return {
                rowspan: row,
                colspan: 1
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0
            };
        }
    }
};

const pageChange = pageNum => {
    searchForm.page = pageNum;
    getOrderList();
};

const sizeChange = pageSize => {
    searchForm.perPage = pageSize;
    getOrderList();
};

const getTimeStamp = (timeStr, ms) => {
    let stampNum = 60000 * ms;
    if (!timeStr) return Date.now();
    let t = timeStr;
    // eslint-disable-next-line no-useless-escape
    t = t > 0 ? t : t.toString().replace(/\-/g, '/');
    let times = new Date(t).getTime();
    if (typeof stampNum == 'number') {
        times += stampNum;
    }
    return times;
};

const searchHandler = () => {
    searchForm.page = 1;
    getOrderList();
};

const getPickUpList = () => {
    request('selfPickUpListServ', { perPage: 99 }).then(res => {
        Data.pickUpList = res.data.list || [];
    });
};

// 点击打印小票
const printTicket = async row => {
    await request('printOrderTicketServ', { orderId: row.id });
    ZwMessage.success(`打印成功`);
};

// 标记提货
const markPicked = async row => {
    try {
        if (await confirm(`确定要标记为已提货吗？标记为已提货后不可撤销，请谨慎操作。`, 'warning', '标记已提货')) {
            await request('pickUpDeliveryServ', { orderId: row.id });
            ZwMessage.success(`操作成功`);
            getOrderList();
        }
    } catch (error) {}
};

const remarkRef = ref();
const showRemarkHandler = (id, remark) => {
    remarkRef.value.openHandler(id, remark);
};

onMounted(() => {
    searchForm.shopId = storage.get('ZW-SHOPID');
    setLayout();
    getOrderList();
    getPickUpList();
});
onUnmounted(() => {
    resetLayout();
});
</script>
<style lang="scss" scoped>
.order-list-main {
    font-size: 14px;
    line-height: 14px;
    :deep(.el-tabs__nav-wrap::after) {
        background: #eaeaea;
        height: 1px;
    }
    .picker-container {
        display: flex;
        .place-order-date {
            width: 256rpx !important;
        }
    }
    .search-form {
        background-color: #ffffff;
        :deep(.el-input-group__prepend) {
            background-color: #ffffff;
        }
        .keywords_content {
            min-width: 438px;
            max-width: 438px;
        }
        .search-time {
            display: flex;
            .search-time-item {
                width: 72px;
                height: 30px;
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid #eaeaea;
                text-align: center;
                line-height: 30px;
                color: #33302d;
                margin-left: 12px;
            }
            .search-time-item-active {
                color: #ff6b00;
                background: #ffffff;
                border-color: #ff6b00;
            }
            .search-time-item:hover {
                cursor: pointer;
            }
        }
        .search-act {
            margin-left: 10px;
            font-size: 14px;
            line-height: 30px;
            color: #ff6b00;
            cursor: pointer;
        }
    }
    .container {
        background-color: #ffffff;
        padding: 8px 24px 24px;
        margin-top: 16px;
    }
    .tabs {
        position: relative;
        :deep(.el-tabs__item.is-top:nth-child(2)) {
            padding-left: 20px;
        }
        .export-btn {
            position: absolute;
            right: 0;
            top: 0;
        }
    }

    .table-header {
        border: 1px solid #eaeaea;
        border-bottom: none;
        .table-header-con {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 48px;
            background: #f9f9f9;
            overflow: hidden;
        }
        .table-header-item {
            font-weight: 500;
            flex: 1;
            text-align: center;
        }
        .table-header-item:nth-child(n) {
            width: 100px;
            min-width: 100px;
            text-align: center;
        }
        .table-header-item:nth-last-child(1) {
            width: 100px;
            min-width: 100px;
            // max-width: 120px;
            text-align: center;
        }
        .table-header-item:nth-last-child(4) {
            width: 240px;
            min-width: 240px;
            max-width: 240px;
            text-align: center;
        }
        .table-header-item:nth-child(1) {
            padding-left: 12px;
            width: 338px;
            max-width: 338px;
            min-width: 338px;
            text-align: left;
        }
    }

    .status-refund_box {
        display: flex;
        justify-content: center;
        .status-refund {
            width: 63px;
            height: 35px;
            display: grid;
            place-items: center;
            border-radius: 2px;
            border: 1px solid #eaeaea;
        }
    }

    .order-item-bg {
        width: 100%;
        height: 16px;
    }
    .order-item-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 56px;
        background: #f9f9f9;
        border: 1px solid #eaeaea;
        border-bottom: none;
        .sign {
            height: 16px;
            padding: 0 2px;
            background: #ff6b00;
            border-radius: 2px;
            text-align: center;
            line-height: 16px;
            font-weight: 600;
            font-size: 12px;
            color: #ffffff;
            display: inline-block;
        }
        .sign-jifen {
            margin-left: 5px;
            color: #ff6b00;
            height: 22px;
            width: 62px;
            font-size: 12px;
            background: #fffaf9;
            border-radius: 2px;
            border: 1px solid #facaa8;
            display: inline-block;
            line-height: 22px;
            text-align: center;
            display: inline-block;
        }
        .sign-manjian {
            font-weight: 500;
            line-height: 15px;
            font-size: 12px;
            padding: 0 2px;
            background: #ff6b00;
            border-radius: 2px;
            text-align: center;
            display: inline-block;
            color: #ffffff;
        }
        .sign-erp {
            width: 40px;
            height: 22px;
            margin-left: 5px;
            background: #fffaf9;
            padding: 0 2px;
            border-radius: 2px;
            border: 1px solid #facaa8;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ff6b00;
            line-height: 22px;
            display: inline-block;
            text-align: center;
        }
        // 订单号
        .order-item-title-item:nth-child(1) {
            padding-left: 12px;
        }
        // 下单时间
        .order-item-title-item:nth-last-child(1) {
            min-width: 180px;
            text-align: center;
            display: flex;
        }
        .order-item-title-detail {
            width: 88px;
            height: 24px;
            line-height: 24px;
            background: #ffffff;
            border-radius: 2px;
            border: 1px solid #ff6b00;
            color: #ff6b00;
            margin-right: 8px;
            &.remark {
                background: #ffffff;
                border: 1px solid #eaeaea;
                color: #33302d;
            }
            &:hover {
                cursor: pointer;
            }
            &:nth-last-child(1) {
                margin-right: 24px;
            }
        }
    }
    .goods-item {
        display: flex;
        font-size: 14px;
        line-height: 14px;
        position: relative;
        img {
            margin-right: 8px;
            width: 100px;
            height: 100px;
        }
        .shipped-tip {
            width: 100px;
            height: 24px;
            background: rgba(51, 48, 45, 0.6);
            line-height: 24px;
            font-size: 14px;
            font-weight: 550;
            color: #ffffff;
            text-align: center;
            position: absolute;
            bottom: 0;
        }
        .goods-item-info {
            flex: 1;
            .goods-item-name {
                color: #33302d;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                word-break: break-all;
                overflow: hidden; // 文本溢出隐藏
                text-overflow: ellipsis; // 显示省略号
                width: 215px;
                max-height: 32px;
                font-weight: 400;
                line-height: 16px;
                margin-bottom: 9px;
            }
            .goods-item-sku {
                padding-bottom: 4px;
                color: #969696;
            }
            .goods-item-price {
                padding-top: 7px;
                color: #fa6a0a;
                display: flex;
                justify-content: space-between;
            }
        }
        .buyNum {
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }
    .price-color {
        color: #fa6a0a;
    }
    .pay-countdown {
        text-align: center;
        .countdown-time {
            padding-top: 12px;
            color: #4a90e2;
        }
    }
    .buyer-info {
        line-height: 18px;
        .consignee-info {
            margin-top: 15px;
        }
    }

    .ship-button {
        text-align: center;
        i {
            vertical-align: middle;
            cursor: pointer;
            margin-left: 5px;
        }
    }
    .table-button {
        margin: 8px 0;
    }
    .no-table-list {
        border: 1px solid #eaeaea;
        border-top: none;
        text-align: center;
        img {
            width: 145px;
            height: 94px;
        }
        .no-table-list-text {
            padding: 24px 0;
        }
    }
}
</style>
